<template>
  <div>
    <Child v-for="item in userInfo" :key="item.id" :user="item">
      <template v-slot:default="user">
        <!-- <UWinxin :user="user"></UWinxin>
        <UQQ :user="user"></UQQ>
        <USina :user="user"></USina> -->
        <component :is="comp[user.accountJoin.flag]" :user="user"></component>
      </template>
    </Child>
  </div>
</template>

<script>
// 导入组件
import Child from './Child/index.vue'
// // 导入 微信
// import UWinxin from './suppor/UWeixin.vue'
// // 导入 QQ
// import UQQ from './suppor/UQQ.vue'
// // 导入 新浪
// import USina from './suppor/USina.vue'
export default {
  name: 'XD',
  data() {
    return {
      userInfo: [
        {
          id: 1001,
          username: 'admin',
          intro: '这个是管理员账号,请勿修改',
          accountJoin: {
            flag: 'UWeixin',
            wechat: 'admin-wechat'
          },
          createDate: 1645184446523
        },
        {
          id: 1002,
          username: 'zhangsan',
          intro: '一个乐观的开发者',
          accountJoin: {
            flag: 'UQQ',
            qq: '465258674'
          },
          createDate: 1645182446523
        },
        {
          id: 1003,
          username: 'lisi',
          intro: '这一个沮丧的开发者',
          accountJoin: {
            flag: 'USina',
            sina: '会飞的猪',
            email: 'huifeidezhu@163.com'
          },
          createDate: 1645144446523
        }
      ]
    }
  },
  // 注册
  // components: { Child, UWinxin, UQQ, USina }
  components: { Child },
  computed: {
    comp() {
      const obj = {}
      const context = require.context('./suppor', false, /.vue$/)

      context.keys().forEach((path) => {
        // path是组件的路径
        const comp = context(path) // 拿到每个模块
        // comp.default  ---> 组件
        // comp.default.name  ---> 组件配置想中的name属性  UQQ、USina、UWechat
        obj[comp.default.name] = comp.default // 把每个组件添加到对象中
      })
      return obj
    }
  }
}
</script>

<style scoped></style>
